<template>
    <div>
        <a-row>
            <a-col span="24" style="padding: 0 12px;">
                <a-card title="新增模板">
                    <a-form :form="form" @submit="save">
                        <a-form-item label="模板名称：" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-input v-decorator="[
                                    'name',
                                    {rules: [{ required: true, message: '请填写模板名称' }]}
                                ]" placeholder="请输入模板名称"/>
                        </a-form-item>
                        <a-form-item label="模板类型" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-select :options="[{value:1,label:'收据模板'},{value:2,label:'通知单模板'}]" v-decorator="['type',
                            {
                                initialValue: '1',
                                rules: [{required: true, message: '请选择模板类型'}]
                            }
                        ]" >
                                <a-select-option value="1">
                                    收据模板
                                </a-select-option>
                                <a-select-option value="2">
                                    通知单模板
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="纸张类型" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-select :options="[{value:3,label:'A3'},{value:4,label:'A4'},{value:5,label:'A5'},{value:6,label:'A6'}]" v-decorator="['paper_type',
                            {
                                initialValue: '3',
                                rules: [{required: true, message: '请选择纸张类型'}]
                            }
                        ]" >
                                <a-select-option value="3">
                                    A3
                                </a-select-option>
                                <a-select-option value="4">
                                    A4
                                </a-select-option>
                                <a-select-option value="5">
                                    A5
                                </a-select-option>
                                <a-select-option value="6">
                                    A6
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="打印布局" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-select :options="[{value:1,label:'纵向'},{value:2,label:'横向'}]" v-decorator="['layout',
                            {
                                initialValue: '1',
                                rules: [{required: true, message: '请选择打印布局'}]
                            }
                        ]" >
                                <a-select-option value="2">
                                    横向
                                </a-select-option>
                                <a-select-option value="1">
                                    纵向
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="内容数量：" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-input-number :min="1" :max="20" @change="onChangeNum" v-decorator="[
                                    'num',
                                    {rules: [{ required: true, message: '请填写内容数量' }]}
                                ]" />
                            当前值：{{num}}
                        </a-form-item>
                        <a-form-item label="页边距：" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-input v-decorator="[
                            'range_t',
                            {rules: [{ required: true, message: '请填写上边距' }],initialValue: '20'}
                            ]" addonBefore="上" style="width: 240px;" addonAfter="px" :min="1" :max="20" />&nbsp;
                            <a-input v-decorator="[
                                    'range_r',
                                    {rules: [{ required: true, message: '请填写右边距' }],initialValue: '20'}
                                ]" addonBefore="右" style="width: 240px;" addonAfter="px" :min="1" :max="20" />
                            <a-input v-decorator="[
                                    'range_b',
                                    {rules: [{ required: true, message: '请填写下边距' }],initialValue: '20'}
                                ]" addonBefore="下" style="width: 240px;" addonAfter="px" :min="1" :max="20" />&nbsp;
                            <a-input v-decorator="[
                                    'range_l',
                                    {rules: [{ required: true, message: '请填写左边距' }],initialValue: '20'}
                                ]" addonBefore="左" style="width: 240px;" addonAfter="px" :min="1" :max="20" />
                        </a-form-item>
                        <a-form-item label="收据宽度：" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-input v-decorator="[
                                    'width',
                                    {rules: [{ required: true, message: '请填写收据宽度' }],initialValue: '725'}
                                ]" style="width: 240px;" addonAfter="px" :min="1" :max="20" />&nbsp;
                        </a-form-item>
                        <a-form-item label="说明：" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
                            <a-input v-decorator="[
                                    'remark',
                                    {rules: [{ required: false, message: '请填写说明' }]}
                                ]" placeholder="请输入说明"/>
                        </a-form-item>
                    </a-form>
                    <a-button slot="extra" size="small" @click="save">下一步</a-button>
                    <a-button slot="extra" size="small" style="margin-left: 10px" @click="back">返回</a-button>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script>
import { saveTollModel,selectTollModel,updateTollModel } from '@/api/cashier'
import { mapGetters } from 'vuex'
export default {
    name: 'charge_toll_add_model',
    data() {
        return {
            data: [],
            name:'',
            type:0,
            paper_type:0,
            layout:0,
            num:0,
            range_t:0,
            range_r:0,
            range_b:0,
            range_l:0,
            width:0,
            remark:'',
            form: this.$form.createForm(this),
        }
    },
    mounted() {
        if(this.$route.params.id) {
            selectTollModel({id: this.$route.params.id,token:this.token()}).then(res => {
                this.form.setFieldsValue({
                    name:res.data.name,
                    type:res.data.type,
                    paper_type:res.data.paper_type,
                    layout:res.data.layout,
                    num:res.data.num,
                    range_t:res.data.range_t,
                    range_r:res.data.range_r,
                    range_b:res.data.range_b,
                    range_l:res.data.range_l,
                    width:res.data.width,
                    remark:res.data.remark,
                })
            }).catch(err => {
                console.log(err)
            })
        } else {
            this.form.setFieldsValue({
                type:1,
                paper_type:3,
                layout:1,
            })
        }
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        onSearch (value) {
            console.log(value)
        },
        onChangeNum(value) {
            this.num = value;
        },
        save(e) {
            let id = this.$route.params.id;
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.$route.params.id) {
                        values.id = this.$route.params.id;
                        updateTollModel(Object.assign(values,{token:this.token()})).then(res => {
                            if(res.code == 0) {
                                this.$notification.success({
                                    message: '成功',
                                    description: res.msg
                                })
                                setTimeout(() => {
                                    this.$router.push({name: 'charge_toll_add_model_two',params: { edit_id: id }})
                                }, 1000)
                                // setTimeout(() => {
                                //     this.$router.push({name: 'charge_toll_index'})
                                // }, 1000)
                            } else {
                                this.$notification['error']({
                                    message: '错误',
                                    description: res.msg,
                                    duration: 4
                                })
                            }

                        }).catch(err => {
                            this.$notification['error']({
                                message: '错误',
                                description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                                duration: 4
                            })
                        })
                    } else {
                        saveTollModel(Object.assign(values,{token:this.token()})).then(res => {
                            if(res.code == 0) {
                                this.$notification.success({
                                    message: '成功',
                                    description: res.msg
                                })
                                setTimeout(() => {
                                    this.$router.push({name: 'charge_toll_index'})
                                }, 1000)
                            } else {
                                this.$notification['error']({
                                    message: '错误',
                                    description: res.msg,
                                    duration: 4
                                })
                            }

                        }).catch(err => {
                            this.$notification['error']({
                                message: '错误',
                                description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                                duration: 4
                            })
                        })
                    }
                }
            })
        },
        back() {
            this.$router.go(-1)
        }
    }
}
</script>